<!DOCTYPE html>
<html lang="en">
<head>
    <title>佳怡供应链金融</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
    <!-- <link rel="stylesheet" href="css/zui.css"> -->
    <link rel="stylesheet" href="lib/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="demos/css/demos.css">
    <link rel="stylesheet" href="font/fontscss/iconfont.css">
    <link rel="stylesheet" href="css/common.css">

    <style type="text/css">
        .weui-cells{
            top : 1.9rem;
            /*margin-bottom: 15%;*/
        }
        .weui-cells_checkbox .weui-cell__hd{
            width: 8%;
            float: left;
        }
        .weui_cells .weui-row{
            background: #fff;
        }

        .detailcen{
            padding: 0 15px 10px;
            background: #fff;
        }
        .detailcen .weui-col-70{
            float: left;
            box-sizing: border-box;
            width: 70%;
        }
        .input_left{
            position: relative;
            width: 90%;
            height: 45px;
            border: 1px solid #dcdcdc;
            border-radius: 3px;
        }
        .input_left span{
            position: absolute;
            line-height: 30px;
            left: 10px;
            top: 8px;
            font-size: 18px;
            color: #333;
        }
        .input_left .weui-col-50 input{
            color: #333;
            width: 100%;
            padding-left: 35px;
            height: 45px;
            border: none;
            box-sizing: border-box;
            line-height: 35px;
            font-size: 18px;
            border-right: 1px solid #dcdcdc;
        }
        .input_left .weui_btn_default{
            background: #fff;
            color: #fd8838;
            font-size: 1em;
            height: 45px;
            line-height: 45px;
            box-sizing: border-box;
        }
        .detailcen .weui-col-30{
            float: left;
            box-sizing: border-box;
            width: 30%;
        }
        .input_right input{
            border-radius: 4px;
            height: 45px;
            line-height: 45px;
            box-sizing: border-box;
        }
        .detailcen .last_money{
            font-size: 14px;
            color: #FB5858;
            padding-top: 10px;
        }
        .content-padded .weui_article{
            background: #fff;
        }


        .content-padded .weui_article section{
            margin-bottom: 0;
            width: 100%;
        }
        .approve_list{
            background: #fafafa;
            width: 100%;
            border: 1px solid #e6e6e6;
            list-style: none;
            margin-top: 15px;
        }
        .approve_list li{
            border-bottom: 1px solid #e6e6e6;
            padding: 10px 15px;
            font-size: 16px;
        }
        .weui-form-preview__ft{

            margin-bottom: 2.5rem;

        }
        .icon_back{
            position: absolute;
            left: -1rem;
            top: 0.9rem;
            width: 0.5rem;
            height: 1.0rem;
            background: url(./images/icon-back.png);
            background-size: 0.5rem 1em;
            vertical-align: middle;
        }
        .p{
            font-family: PingFangSC-Regular;
            color: #FFFFFF;
            letter-spacing: 0;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        ul li p{
            color: #111111;
        }
        #project li{
           // height: 6rem;
            overflow: auto;
            /* padding-left: 2rem; */
            border-bottom: 1px solid #ececec;
        }
        .cir{
            width: 0.7rem;
            height: 0.7rem;
            border: 2px solid #979797;
            border-radius: 10rem;
        }
        .pro_right{
            position: absolute;
            right: 2rem;
            margin-top: 1rem;
        }
        .pro_left{
            position: absolute;
            left: 2rem;
            margin-top: 1rem;
        }
        /*  .squ{
             position: absolute;
             margin: 0.18rem;
             width: 0.2rem;
             height: 0.2rem;
             border: 2px solid #979797;
             border-radius: 30%;
         } */
        .pint_money{
            width: 100%;
            height: 2.1rem;
            /* background: #ffffff; */
            border-top: 1px solid #ff9413;
            /* border-bottom: 1px solid #ff9413; */
            position: fixed;
            bottom: 0;
            z-index: 1000;
            background: rgb(249, 145, 94);
        }
        .money_but{
            display: block;
            width: 30%;
            height: 100%;
            font-size: 0.3rem;
            text-align: center;
            line-height: 0.84rem;
            background: #c4c2c2;
            color: white;
            float: left;
        }
        i.icon.icon-next {
            background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
            background-size: 100% 100%;
        }
        i.icon.icon-prev {
            background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
            background-size: 100% 100%;
        }
        i.icon.icon-prev {
            width: 0.15rem;
            height: 0.15rem;
        }
        i.icon.icon-next {
            width: 0.15rem;
            height: 0.15rem;
        }
        .timeul{
            text-align: center;
            line-height: 1.5em;
            height: 5rem;
            border-bottom: 1px solid #ececec;
        }
        .timeul li{
            width: 50%;
            padding-top: 0%;
            font-size: 14px;
        }
        input{
            width: 75% !important;
            text-align: center;
            color: #111111;
        }
        .open-popup:after {
            content: "";
            display: inline-block;
            height: 6px;
            width: 6px;
            border-width: 2px 2px 0 0;
            border-color: #c8c8cd;
            border-style: solid;
            -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
            transform: matrix(.71, .71, -.71, .71, 0, 0);
            position: relative;
            top: -2px;
            position: absolute;
            top: 50%;
            right: 15px;
            margin-top: -4px;
        }

        .open-popup:active {
            background-color: #ececec;
        }

        .itemtop {
            font-size: 16px;
            margin-bottom: 0.5rem;
            margin-top: 0.5rem;
        }

        .itemtop span {
            border-left: 6px solid #FF9461;
            padding-left: 1rem;
            margin-top: 0.2rem;
            margin-left: 1rem;
        }

        span {
            width: 24%;
            display: inline-block;
            margin-left: 1rem;
        }

        .itembommon {
            line-height: 1.0rem;
        }

        .itembommon .content {
            color: #FF9461;
            font-size: 14px;
        }

        .itembommon .content-title {
            color: #A2A2A2;
            font-size: 14px;
        }

        #project {
            margin-top: 0.3rem;
        }

    </style>
    <script src="lib/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        var json;
        var surs=0;
        var index;
        var pro_mon=0;
        var year=0;
        $(function(){
            var info=localStorage.getItem("pro_info");
            var id=localStorage.getItem("sq_id");
            console.log(info);
            $.ajax({
                url:"productInvestment/getProductInfo",
                data:{id:id},
                success:function(msg){

                    $("#total_pri").html(msg.money+"元");
                    //json=JSON.parse(msg);

                    pro_mon=0;
                    /*for(var i=0;i<json.length;i++){
                        surs+=parseFloat(json[i].yield);
                        pro_mon+=parseFloat(json[i].money);*/
                        // data-target="#half"
                        /*$("#project").append('<li  class="open-popup" onclick="setProMon(this,1)"><span class="pro_left" id="n'+json[i].id+'">'+json[i].product_name+'</span><span class="pro_right" id="m'+json[i].id+'">￥'+json[i].money+'</span></li>');*/
                        var str = "";
                        /*
                         str += "<li class=\"open-popup\" data-id=\""+json[i].id+"\" onclick=\"setProMon(this,1,"+json[i].money+")\">"
                         */
                        str += "<li class=\"open-popup\" data-id=\""+msg.id+"\" >"
                        str += "    <div class=\"itemtop\"style=' padding-left: 1rem;margin-top: 0.2rem;margin-left: 1rem;    border-left: 6px solid #FF9461;'>"
                        str += "    " + msg.product_name + ""
                        str += "    </div>"
                    str += "    <div class=\"itembommon\">"
                    str += "   <div class=\"content-title\">"
                    str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">融资开始时间</span>"
                    str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">融资结束时间</span>"

                    str += "    </div>"
                    str += "   <div class=\"itembommon\">"
                    str += "   <span style='margin-left: 3.5rem'class=\"leftborder\">" + msg.start_time + "</span>"
                    str += "   <span style='margin-left: 3.5rem'class=\"leftborder\"  id=\"m"+msg.id+"\">" + msg.end_time + "</span>"
                    str += "     </div>"

                        str += "    <div class=\"itembommon\">"
                        str += "   <div class=\"content-title\">"
                        str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">综合融资成本率</span>"
                        str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">投资金额</span>"

                        str += "    </div>"
                        str += "   <div class=\"itembommon\">"
                        str += "   <span style='margin-left: 3.5rem'class=\"leftborder\">" + msg.cost_rate1+ "%</span>"
                        str += "   <span style='margin-left: 3.5rem'class=\"leftborder\"  id=\"m"+msg.id+"\">" + msg.money + "</span>"
                        str += "     </div>"
                    str += "    <div class=\"itembommon\">"
                    str += "   <div class=\"content-title\">"
                    str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">投资结束时间</span>"
                    str += "    <span style='margin-left: 3.5rem' class=\"leftborder\">可用金额</span>"

                    str += "    </div>"
                    str += "   <div class=\"itembommon\">"
                    str += "   <span style='margin-left: 3.5rem'class=\"leftborder\">" + msg.end_time+ "</span>"
                    str += "   <span style='margin-left: 3.5rem' class=\"leftborder\"  >" + msg.kymoney + "</span>"
                    str += "     </div>"
                        str += "   <div class=\"\" style='width: 100%'>"
                        str += "    <input type='text' id='product_investment_amount' placeholder='请输入产品投资金额' onchange='setProMon(this,"+msg.kymoney+")' style='height: 30px;margin-left: 10%'>"
                        str += "    </div>"
                        str += "    </div>"


                        str += "   </li>"

                        $("#project").append(str);

                    //}

                   // $("#total_pri").html(pro_mon+"元");
                    //$("#surs").html(surs+"%");
                    /*setYear();*/
                    //setPriAndPro();
                }
            });
        });





    </script>
</head>

<body>
<header style="position:fixed;">
    <div class="weui-row weui-no-gutter">
        <div class="weui-col-33" id="back_icon">
            <a href="javascript:history.go(-1)" class="icon pull-right"><i class="icon_back"></i></a>
        </div>
        <div class="weui-col-33">投资</div>
        <div class="weui-col-33" id="ligin_icon">
            <!-- <a href="login.html" class="icon pull-right"><i class="iconfont icon-wode"></i></a> -->
        </div>
    </div>
</header>
<div class="weui-cells" style="margin-bottom: 4.3rem;">
    <div style="width:100%;background-color: #FF9461;/*position: fixed;*/z-index: 10;">
        <div style="width:100%;height: 4rem;">
            <p class="p" style="font-size: 1em;padding-top:1.7rem;padding-left:40%;" id="pro_name">投资有风险</p>
        </div>
        <div style="height: 4rem;text-align: center;">
            <!--<p class="p" style="font-size: 2.25em;" id="one_pri"></p>
            <p class="p" style="ont-size: 12px;opacity: 0.6;">累计收益（元）</p>
            <p class="p" style="padding-top: 1.5rem;font-size: 1em;">投资总额 <span id="total_pri"></span> 元</p>-->
            <p class="p" style="font-size: 14px;">投资总额（元）</p>
            <p class="p" style="padding-top: 1.5rem;font-size: 1em;"><span id="total_pri"></span></p>

        </div>
    </div>
    <div style="background: #FFFFFF;/*margin-top: 12.9rem*/">

        <ul id="project">

        </ul>
    </div>
</div>
<div class="weui-tabbar" style="height: 2.5rem;z-index: 5;" id="butts">
    <!-- <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary open-popup" href="javascript:;" onclick="setProMon(null,2)" data-target="#half">投资金额</button>-->
    <button type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="javascript:;" onclick="sub()">立即投资</button>
</div>
</body>
<script src="js/circleProgress.js"></script>
<script src="js/jquery-weui.js"></script>
<!--script src="js/zui.min.js"></script>-->
<script type="text/javascript">
    (function ($) {
        var token=localStorage.getItem("token");
        var username=localStorage.getItem("username");
        if(token!=null&&username!=null&&token!="undefined"){
            $("#ligin_icon").append('<a href="#" class="icon pull-right">'+username+'</a>');
        }else{
            $("#ligin_icon").append('<a href="login.html" class="icon pull-right"><i class="iconfont icon-wode"></i></a>');
        }
    })(jQuery);
    $(function(){
        var state_date=format(new Date(),"yyyy年MM月dd日");
        $("#start_date").calendar({
            value: [format(new Date(),"yyyy-MM-dd")],
            dateFormat: 'yyyy年mm月dd日'
        });
        $("#start_date").val(state_date);

        var end_date=new Date();
        end_date.setFullYear(end_date.getFullYear()+3)
        $("#end_date").calendar({
            value: [format(end_date,"yyyy-MM-dd")],
            dateFormat: 'yyyy年mm月dd日'
        });
        $("#end_date").val(format(end_date,"yyyy年MM月dd日"));


        $("#start_date").change(function(){
            setYear();
            setPriAndPro();
        });
        $("#end_date").change(function(){
            setYear();
            setPriAndPro();
        });
    });
    function setProMon(product,kymoney){
        var a = product.value-kymoney;
        if(a>0){
            $("#product_investment_amount").val("")
            $.toast("产品投资金额不能超出可用金额！");
            //$("#kymoney").val("")
        }
    }
    function sub() {

        var product = $("#product_investment_amount").val();


        if (product > 0) {


            $.confirm("您确定要投资吗?", "确认投资?", function () {
                $.ajax({
                    url: "productInvestment/investment",
                    type: "post",
                    data: {
                        product_investment_amount: $("#product_investment_amount").val(),
                        id: localStorage.getItem("sq_id")
                    },
                    success: function (msg) {
                        if (msg.suc != 0) {
                            $.toast("投资成功");
                            localStorage.setItem("pro_info", "");
                            location.href = "productInvest.html";
                        }
                    }
                });
            }, function () {

            });
        }else{
            $.toast("请输入投资金额")
        }

    }
    var format = function(time, format){
        var t = new Date(time);
        var tf = function(i){return (i < 10 ? '0' : '') + i};
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
            switch(a){
                case 'yyyy':
                    return tf(t.getFullYear());
                    break;
                case 'MM':
                    return tf(t.getMonth() + 1);
                    break;
                case 'mm':
                    return tf(t.getMinutes());
                    break;
                case 'dd':
                    return tf(t.getDate());
                    break;
                case 'HH':
                    return tf(t.getHours());
                    break;
                case 'ss':
                    return tf(t.getSeconds());
                    break;
            }
        })
    }
</script>
<script src="js/web/checkLogin.js"></script>
</html>